<script>
import { logout } from "../apis/api";
export default {
  data() {
    return {
      token:localStorage.getItem("token"),
      ishover: false
    }
  },
  methods: {
    next(url) {
      console.log(url)
      this.$router.push(url);
    },
    //登录下拉菜单
    up() {
      this.ishover = true
    },
    down() {
      this.ishover = false
    },
    //退出登录
    logoutt() {
      logout().then(() => {
        localStorage.removeItem("token");
        this.$message.success("退出登录成功");
        setTimeout(() => {
          location.reload();
        }, 500);
      });
    }
  }
}


</script>

<template>
  <header class="head">
    <div @mouseover="up" @mouseleave="down">
      <img src="../assets/icon/header-p1.png" alt="" style="margin-left: 10px;"
       @click="next(!token?'/login':'/Wallet')" />
      <ul class="loginch" v-if="ishover && token">
        <li><a href="#" class="uu" @click="logoutt">退出登录</a></li>
      </ul>
    </div>

    <h1>Gate.io</h1>
    <!--<img src="./assets/icon/header-p2.png" alt="" srcset="" />
    <img src="./assets/icon/header-p3.png" alt="" srcset="" />-->
    <img src="../assets/icon/header-p4.png" alt="" style="margin-right: 10px;" />
  </header>
  <div style="height: 50px;"></div>
</template>

<style>
.head {
  width: 490px;
  height: 40px;
  background-color: #6495ed;
  display: flex;
  position: fixed;
  z-index: 999;
  padding: 5px;
}

.head h1 {
  width: 90%;
  text-align: center;
  font-size: 28px;
  color: #fff;
}

.head img {
  margin-top: 5px;
  width: 30px;
  height: 30px;
}

.loginch {
  text-decoration: none;
  list-style: none;
  position: absolute;
  padding: 5px;
  margin-left: -5px !important;
  z-index: 999;
  background-color: #fff;
}
</style>